<template>
    <div>
        <a-row class='mytitle'>
            {{ $t('保护网关') }}
        </a-row>

        <NoAuthPage v-showNoAuth="'H1-1'" :imgBoxStyle="{ height: '85vh', margin: '10px' }" />
        <a-row v-userAuth="'H1-1'" style="margin:1em">
            <a-card hoverable>
                <div style="display: flex;justify-content: space-between;">
                    <a-button v-userAuth="'H1-2'" type='primary' @click="handleCreate">
                        <Iconfont class="icon button-icon-style" type="icon-new16f"></Iconfont>
                        {{ $t('创建保护网关') }}
                    </a-button>
                    <div style="display: flex;">
                        <div style="width: 80px;margin-top: 4px;">{{ $t('名称') }}：</div>
                        <a-input v-model="input" :placeholder="$t('Enter') + $t('名称')" />
                        <a-button type='primary' style="margin-left: 8px;" @click="handleSearch">
                            <Iconfont class="icon button-icon-style" type="icon-search16f"></Iconfont>
                            {{ $t('查询') }}
                        </a-button>
                    </div>
                </div>

                <a-table style="margin-top:16px" class="bigstyle" rowKey="id" :columns='columns' :loading="loading"
                    :dataSource='dataList' :locale="defaultSetting" :pagination='pagination' size='small' :scroll="{ x: 1340 }">
                    <template slot="state" slot-scope="state">
                        <div v-if="state == '1'">
                            <span class="dot successBg"></span>
                            <span style="margin-left: 8px;">{{ $t('健康') }}</span>
                        </div>
                        <div v-if="state == '2'">
                            <span class="dot failBg"></span>
                            <span style="margin-left: 8px;">{{ $t('异常') }}</span>
                        </div>
                    </template>
                    <template slot="create_time" slot-scope="create_time">
                        {{ create_time.slice(0, 19) }}
                    </template>
                    <template slot="operate" slot-scope='text, record'>
                        <div style="display: flex;" v-userAuth="'H1-2'">
                            <a-tooltip placement='top'>
                                <template slot='title'>
                                    <span>{{ $t('Edit') }}</span>
                                </template>
                                <Iconfont class="icon table-operation-icon" type="icon-edit16f" @click="handleEdit(record)">
                                </Iconfont>
                            </a-tooltip>
                            <a-tooltip placement='top'>
                                <template slot='title'>
                                    <span>{{ $t('Delete') }}</span>
                                </template>
                                <Iconfont class="icon table-operation-icon" type="icon-delete16f"
                                    @click="handleDelete(record.name, record.id)"></Iconfont>
                            </a-tooltip>
                        </div>
                    </template>
                </a-table>
            </a-card>
        </a-row>

        <createGateway ref="createRef" @get-list="getList" />
        <modifyGateway ref="modifyRef" @get-list="getList" />
    </div>
</template>

<script>
import EmptyData from '@/components/common/EmptyData'
import createGateway from './gateway/createGateway'
import modifyGateway from './gateway/modifyGateway'
import NoAuthPage from '@/components/common/NoAuthPage'

export default {
    name: 'gateway',
    components: { EmptyData, createGateway, modifyGateway, NoAuthPage },
    data() {
        return {
            loading: false,
            dataList: [],
            copyList: [],
            defaultSetting: { emptyText: <EmptyData /> },
            pagination: {
                defaultPageSize: 10,
                showTotal: total => `${this.$t('A-total-of')} ${total} ${this.$t('Data')}`,
                showSizeChanger: true,
                pageSizeOptions: ['10', '20', '30', '40', '50', '100', ],
                onShowSizeChange: (current, pageSize) => this.pageSize = pageSize,
                buildOptionText: (props) => `${props.value} / ${this.$t('page')}`
            },
            columns: [
                { title: this.$t('保护网关名称'), dataIndex: 'name', key: 'name', width: 160, fixed: 'left' },
                { title: this.$t('保护网关节点'), dataIndex: 'info', key: 'info' },
                { title: this.$t('创建时间'), dataIndex: 'create_time', key: 'create_time', scopedSlots: { customRender: 'create_time' } },
                { title: this.$t('状态'), dataIndex: 'state', key: 'state', scopedSlots: { customRender: 'state' } },
                { title: this.$t('Operate'), key: "operate", scopedSlots: { customRender: 'operate' }, width: 160, fixed: 'right' }
            ],
            input: '',
            gatewayOption: [],
        }
    },
    async mounted() {
        await this.getList()
    },
    methods: {
        async getList() {
            this.loading = true
            const { data } = await this.$api.data.getGatewayListApi()
            this.dataList = data
            this.copyList = data
            await this.getGatewayOption()
            this.loading = false
        },
        async getGatewayOption() {
            const { data } = await this.$api.data.getGatewayOptionApi()
            this.gatewayOption = data.map(item => {
                const obj = { value: item.machine_id, label: item.business_address, hostname: item.hostname }
                return obj
            })
        },
        handleSearch() {
            this.loading = true
            const list = []; // 用于存放搜索出来数据的新数组
            if (this.input) {
                this.copyList.filter((item) => {
                    if (item.name.indexOf(this.input) !== -1) {
                        list.push(item);
                    }
                });
                this.dataList = list;
            } else {
                this.dataList = this.copyList
            }
            this.loading = false
        },
        async handleCreate() {
            // await this.getGatewayOption()
            this.$refs.createRef.isShow = true
            this.$refs.createRef.gatewayOption = this.gatewayOption
        },
        async handleEdit(item) {
            // await this.getGatewayOption()
            this.$refs.modifyRef.gatewayOption = this.gatewayOption
            this.$refs.modifyRef.form = { ...item }
            this.$refs.modifyRef.isShow = true
        },
        async handleDelete(name, id) {
            this.loading = true
            let _this = this
            this.$confirm({
                title: this.$t('删除保护网关'),
                content: this.$t('删除保护网关名为') + `${name}` + this.$t('后，将无法恢复！您确定要删除吗？'),
                cancelText: this.$t('Cancel'),
                okText: this.$t('Sure'),
                okType: 'danger',
                icon: 'close-circle',
                async onOk() {
                    const { data } = await _this.$api.data.deleteGatewayListApi({ id, name })
                    _this.model(data.id) //返回模板
                    _this.notice(data.id, data.params, data.flag) //通知列表显示
                    if (data.flag == '0') _this.getList()
                },
                onCancel() {
                }
            })
            this.loading = false
        }
    }
}
</script>
